// 获取客户分层列表
function getCustomerSegments() {
  return listCustomerSegment({
    pageNumber: 1,
    pageSize: 10000
  }).then(response => {
    customerSegments.value = response.data.records || response.data || [];
  }).catch(() => {
    customerSegments.value = [];
  });
}
<template>
  <el-drawer
    :title="title"
    v-model="detailVisible"
    size="600px"
    :before-close="handleClose"
  >
    <el-descriptions :column="1" border>
      <el-descriptions-item label="活动名称">{{ form.campaignName }}</el-descriptions-item>
      <el-descriptions-item label="活动描述">{{ form.description }}</el-descriptions-item>
      <el-descriptions-item label="开始时间">{{ parseTime(form.startTime) }}</el-descriptions-item>
      <el-descriptions-item label="结束时间">{{ parseTime(form.endTime) }}</el-descriptions-item>
      
      <!-- 客户群体信息 -->
      <el-descriptions-item label="客户群体">
        <div v-if="parsedCustomerGroup">
          <div v-if="parsedCustomerGroup.tags && parsedCustomerGroup.tags.length > 0">
            <div><strong>客户标签:</strong></div>
            <div>{{ getTagLabels(parsedCustomerGroup.tags).join(', ') }}</div>
          </div>
          <div v-if="parsedCustomerGroup.segments && parsedCustomerGroup.segments.length > 0">
            <div><strong>客户分层:</strong></div>
            <div>{{ getSegmentLabels(parsedCustomerGroup.segments).join(', ') }}</div>
          </div>
          <div v-if="parsedCustomerGroup.selectedCustomers && parsedCustomerGroup.selectedCustomers.length > 0">
            <div><strong>选择客户:</strong></div>
            <div>{{ parsedCustomerGroup.selectedCustomers.length }} 个客户</div>
          </div>
        </div>
        <div v-else>
          无客户群体信息
        </div>
      </el-descriptions-item>
      
      <!-- 营销方式信息 -->
      <el-descriptions-item label="营销方式">
        <div v-if="parsedMarketingMethods && parsedMarketingMethods.methods">
          <div v-for="method in parsedMarketingMethods.methods" :key="method">
            <div v-if="method === 'sms'">
              <strong>短信营销</strong>
              <div>模板: {{ parsedMarketingMethods.sms?.template }}</div>
              <div>内容: {{ parsedMarketingMethods.sms?.content }}</div>
            </div>
            <div v-else-if="method === 'email'">
              <strong>邮件营销</strong>
              <div>模板: {{ parsedMarketingMethods.email?.template }}</div>
              <div>主题: {{ parsedMarketingMethods.email?.subject }}</div>
              <div>内容: {{ parsedMarketingMethods.email?.content }}</div>
            </div>
            <div v-else-if="method === 'wechat'">
              <strong>微信营销</strong>
              <div>模板: {{ parsedMarketingMethods.wechat?.template }}</div>
              <div>内容: {{ parsedMarketingMethods.wechat?.content }}</div>
            </div>
          </div>
        </div>
        <div v-else>
          无营销方式信息
        </div>
      </el-descriptions-item>
      
      <el-descriptions-item label="触发类型">
        <span v-if="form.triggerType === 'immediate'">立即执行</span>
        <span v-else-if="form.triggerType === 'scheduled'">定时执行</span>
        <span v-else>{{ form.triggerType }}</span>
      </el-descriptions-item>
      
      <el-descriptions-item v-if="form.triggerType === 'scheduled'" label="执行时间">
        {{ parseTime(form.scheduledTime) }}
      </el-descriptions-item>
      
      <el-descriptions-item label="任务类型">
        <span v-if="form.taskType === 'once'">一次性任务</span>
        <span v-else-if="form.taskType === 'recurring'">循环任务</span>
        <span v-else>{{ form.taskType }}</span>
      </el-descriptions-item>
      
      <el-descriptions-item v-if="form.taskType === 'recurring'" label="循环周期">
        {{ form.recurringPattern }}
      </el-descriptions-item>
      
      <el-descriptions-item label="状态">
        <el-tag v-if="form.status === 'draft'" type="info">草稿</el-tag>
        <el-tag v-else-if="form.status === 'active'" type="success">激活</el-tag>
        <el-tag v-else-if="form.status === 'completed'" type="primary">已完成</el-tag>
        <el-tag v-else-if="form.status === 'cancelled'" type="danger">已取消</el-tag>
        <el-tag v-else>{{ form.status }}</el-tag>
      </el-descriptions-item>
      
      <el-descriptions-item label="创建人">{{ form.createdBy }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ parseTime(form.createdDate) }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ parseTime(form.modifiedDate) }}</el-descriptions-item>
    </el-descriptions>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup name="MarketingDetail" lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import { parseTime } from "@/utils/Jinbooks";
import { listCustomerSegment } from '@/api/customer/customer-segment'

const detailVisible = ref(false)
const title = ref('')

// 表单参数
const form = reactive({
  id: undefined,
  campaignName: '',
  description: '',
  startTime: '',
  endTime: '',
  customerGroup: '',
  marketingMethods: '',
  triggerType: '',
  scheduledTime: '',
  taskType: '',
  recurringPattern: '',
  status: '',
  createdBy: '',
  createdDate: '',
  modifiedDate: ''
})

// 客户标签选项
const customerTags = [
  { value: 'vip', label: 'VIP客户' },
  { value: 'potential', label: '潜在客户' },
  { value: 'loyal', label: '忠实客户' }
]

// 客户分层列表
const customerSegments = ref([])

// 定义属性
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  }
})

// 定义事件
const emit = defineEmits(['update:open'])

// 解析客户群体数据
const parsedCustomerGroup = computed(() => {
  if (!form.customerGroup) return null;
  try {
    return typeof form.customerGroup === 'string' ? JSON.parse(form.customerGroup) : form.customerGroup;
  } catch (e) {
    console.error('解析客户群体数据失败:', e);
    return null;
  }
});

// 解析营销方式数据
const parsedMarketingMethods = computed(() => {
  if (!form.marketingMethods) return null;
  try {
    return typeof form.marketingMethods === 'string' ? JSON.parse(form.marketingMethods) : form.marketingMethods;
  } catch (e) {
    console.error('解析营销方式数据失败:', e);
    return null;
  }
});

// 根据标签值获取标签显示名称
function getTagLabels(tagValues) {
  return tagValues.map(value => {
    const tag = customerTags.find(t => t.value === value);
    return tag ? tag.label : value;
  });
}

// 根据分层ID获取分层显示名称
function getSegmentLabels(segmentIds) {
  return segmentIds.map(id => {
    const segment = customerSegments.value.find(s => s.id === id);
    return segment ? segment.segmentName : id;
  });
}

// 监听open变化
watch(() => props.open, (val) => {
  detailVisible.value = val
  if (!val) {
    // 重置表单
    Object.keys(form).forEach(key => {
      form[key] = ''
    })
    // 重置客户分层数据
    customerSegments.value = [];
  }
})

// 获取客户分层列表
function getCustomerSegments() {
  return listCustomerSegment({
    pageNumber: 1,
    pageSize: 10000
  }).then(response => {
    customerSegments.value = response.data.records || response.data || [];
  }).catch(() => {
    customerSegments.value = [];
  });
}

// 设置表单数据
function setForm(data) {
  Object.keys(form).forEach(key => {
    if (data[key] !== undefined) {
      form[key] = data[key]
    }
  })
  
  // 获取客户分层数据
  getCustomerSegments();
}

// 关闭处理
function handleClose() {
  detailVisible.value = false
  emit('update:open', false)
}

// 暴露方法
defineExpose({
  setForm
})
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>